<template>
  <div>
    <van-row class="infoCon">
      <van-col span="6">
        <van-image round width="5rem" height="5rem" src="https://img.yzcdn.cn/vant/cat.jpeg" />
      </van-col>
      <van-col span="18" class="userInfo">
        <p class="userInfoblock">用户信息</p>
        <p class="uName">昵称: {{this.user.userName}}</p>
        <p class="uaccount">账号: {{this.user.userAccount}}</p>
      </van-col>
    </van-row>
    <van-cell-group>
      <van-cell title="邮箱" :value="this.user.userEmail" />
      <van-cell title="手机" :value="this.user.userPhone"  />
    </van-cell-group>
    <van-grid :gutter="10">
      <van-grid-item icon="orders-o" text="我的订单" to="/myOrder"/>
      <van-grid-item icon="comment-circle-o" text="我的回复" to="/myReply" />
      <van-grid-item icon="newspaper-o" text="发表帖子" to="/addPostMain" />
    </van-grid>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: ''
    }
  },
  created() {
    this.getUserInfo()
  },
  methods: {
     async getUserInfo() {
        const {data: res } =await this.$http.get('/api/user/getUserInfoForUser')
        if (res.code !== 200) {
          this.$toast('用户数据加载失败')
          return 
        }
        this.user = res.data
     }
  }
}
</script>

<style lang="less" scoped>
.infoCon {
  background-color: whitesmoke;
}
.van-image {
  margin: 10px;
}
.van-col {
  .uName {
    margin: 10px;
  }
  .uaccount{
    margin: 10px;
  }
  .userInfoblock {
    margin: 10px;
  }
}
.van-panel {
  margin-top: 5px;
}
</style>